<template>
    <el-dialog title="表信息维护" v-model="visible" width="80%">

        <el-tabs type="border-card">

            <el-tab-pane label="字段信息">

                <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :stripe="stripe"
                    tooltip-effect="dark" ref="multipleTable" style="width: 100%">
                    <el-table-column prop="sort" label="序号">
                    </el-table-column>
                    <el-table-column prop="columnType" label="类型">
                    </el-table-column>
                    <el-table-column prop="columnName" label="字段名">
                    </el-table-column>
                    <el-table-column prop="codeType" label="代码类型" width="150">
                    </el-table-column>
                    <el-table-column prop="codeField" label="代码字段" width="150">
                        <template #default="scope">
                            <el-input :model-value="scope.row.codeField"
                                @input="value => handleInputChange(value,'codeField', scope.row.sort)"> </el-input>
                        </template>
                    </el-table-column>

                    <el-table-column prop="columnComment" label="备注" width="150">
                        <template #default="scope">
                            <el-input :model-value="scope.row.columnComment"
                                @input="value => handleInputChange(value,'columnComment', scope.row.sort)"> </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isPk" label="是否主键">
                        <template #default="scope">
                            <el-checkbox :model-value="scope.row.isPk=='1'"
                                @change="value => handleInputChange(value, 'isPk',scope.row.sort)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isIncrement" label="是否自增">
                        <template #default="scope">
                            <el-checkbox :model-value="scope.row.isIncrement=='1'"
                                @change="value => handleInputChange(value, 'isIncrement',scope.row.sort)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isRequired" label="是否必填">
                        <template #default="scope">
                            <el-checkbox :model-value="scope.row.isRequired=='1'"
                                @change="value => handleInputChange(value, 'isRequired',scope.row.sort)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isInsert" label="插入">
                        <template #default="scope">
                            <el-checkbox :model-value="scope.row.isInsert=='1'"
                                @change="value => handleInputChange(value, 'isInsert',scope.row.sort)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isEdit" label="编辑">
                        <template #default="scope">
                            <el-checkbox :model-value="scope.row.isEdit=='1'"
                                @change="value => handleInputChange(value, 'isEdit',scope.row.sort)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isList" label="列表">
                        <template #default="scope">
                            <el-checkbox :model-value="scope.row.isList=='1'"
                                @change="value => handleInputChange(value, 'isList',scope.row.sort)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isQuery" label="查询">
                        <template #default="scope">
                            <el-checkbox :model-value="scope.row.isQuery=='1'"
                                @change="value => handleInputChange(value, 'isQuery',scope.row.sort)"></el-checkbox>
                        </template>
                    </el-table-column>

                </el-table>

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[10, 15, 20]" :page-size="pagesize" layout="  prev, pager, next" :total="total">
                </el-pagination>

            </el-tab-pane>
            <el-tab-pane label="基本信息">
<el-form :model="tableForm"  label-width="120px" label-position="right">
      <el-form-item label="表名：" prop="tableName">
        <el-input  v-model="tableForm.tableName" readonly></el-input>
      </el-form-item>
      <el-form-item label="表说明：" prop="tableComment">
        <el-input v-model="tableForm.tableComment" readonly></el-input>
      </el-form-item>
      <el-form-item label="类名：" prop="className">
        <el-input  v-model="tableForm.className"></el-input>
      </el-form-item>
      <el-form-item label="包名称：" prop="packageName">
        <el-input  v-model="tableForm.packageName"></el-input>
      </el-form-item>
      <el-form-item label="模块名称：" prop="moduleName">
        <el-input  v-model="tableForm.moduleName"></el-input>
      </el-form-item>
      <el-form-item label="业务名称：" prop="businessName">
        <el-input  v-model="tableForm.businessName"></el-input>
      </el-form-item>
    
</el-form>

            </el-tab-pane>
            <el-tab-pane label="代码预览">
                <el-button type="primary" @click="handlePreView">刷新查看</el-button>
                <el-tabs>
                    <el-tab-pane v-for="(item,index) in editableTabs" :key="item.name" :label="item.title"
                        :name="item.name">

                        <el-input :id="'txt'+index" type="textarea" :rows="15" placeholder="请输入内容"
                            :model-value="item.content"></el-input>


                    </el-tab-pane>

                </el-tabs>


            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>

                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
    import commonAction from '@/utils/common'
    import {onMounted} from 'vue'
    import * as db_context from '@/models/db_context'
    import { ElMessage, ElTable  } from 'element-plus'
    import {reactive, ref, toRefs    } from 'vue'
    const Template = window.require('art-template');

    export default {
        name: 'DialogTableInfo',
        props: {
            type: String, // 用于判断是添加还是编辑
            reload: Function // 添加或修改完后，刷新列表页
        },
        setup(props: any) {

            const multipleTable = ref(null)
            const state = reactive({
                visible: false,
                stripe: true, //是否为斑马纹 table
                tableData: [] as any[],
                currentPage: 1,
                pagesize: 10,
                total: 0,
                dbname: "",
                options: [],
                db: {},
                editableTabs: [] as any[],
                tabIndex: 2,
                  tableForm: {
          tableName: '',
          tableComment: '',
          className: '',
          packageName: '',
          moduleName: '',
          businessName: ''
         
        },
        tid:0

            })

            onMounted(() => {
                //getTableInfos()
            })

            const handleSizeChange = (val: number) => {
                state.pagesize = val;
            }
            const handleCurrentChange = (val: number) => {
                state.currentPage = val;
            }
            // 开启弹窗
            const open = (id: string) => {
                state.visible = true
                if (id) {
                    getTableInfos(id);
                }

            }
            // 触发过滤项方法
            const handleOption = (val: db_context.GenDb) => {
                console.log('bbbbbbbbbbb');
            }

            const handleInputChange = (val: any, fild: string, index: number) => {
                state.tableData[index - 1][fild] = val;
            }

            // 关闭弹窗
            const close = () => {
                state.visible = false
            }
            const submitForm = async () => {
                state.tableData.forEach(async element => {
                    console.log(element);

                    await db_context.GenTableColumn.updateItemById(element, element.id);

                });
                const item:any=state.tableForm;
                await db_context.GenTable.updateItemById(item,state.tid);

                ElMessage.success('更新成功')
            }
            const getPgTables = () => {
                console.log('1111111111');

            }

           const handlePreView= async () => {
              const preView=await commonAction.preViewCode(state.tableForm.tableName);
              const arrPreview=preView[state.tableForm.tableName];
              arrPreview.forEach((element:any) => {
                    const tab = {
                        title: element.title,
                        name: element.fileName,
                        content: element.content
                    }
                    state.editableTabs.push(tab);
              });
           }
            // 预览
            const handlePreView1 = async () => {
                console.log('bbbbbbbbbbb');


                //取到模版信息
                const option = {
                    templateId: 1
                };
                const files = await db_context.TemplateFile.getListByOption(option);
                //
                files.forEach(async element => {
                    const fileContent = element.fileContent;


                    var source = fileContent;

                    var render = Template.compile(source);
                    var html = render({
                        list: ['摄影', '电影', '民谣', '旅行', '吉他']
                    });



                    const tab = {
                        title: element.fileName,
                        name: element.fileName,
                        content: html
                    }



                    state.editableTabs.push(tab);

                });

                //



            }
            const getTableInfos = async (tbid: string) => {
                const tableName = "";
                const option = {
                    "tableId": tbid
                }

                const columns: any = await db_context.GenTableColumn.getListByOption < db_context
                    .GenTableColumn > (option);
                state.tableData = columns;


                const tbInfo:any=await db_context.GenTable.getById(Number.parseInt(tbid));
                state.tableForm=tbInfo

                state.tid=Number.parseInt(tbid);
                console.log(columns);

            }

            // 下划线转换驼峰
            const toHump = ((str: string): string => {
                var arr = str.split('_');
                return arr.map(function (item, index) {
                    if (index === 0) {
                        return item;
                    } else {
                        return item.charAt(0).toUpperCase() + item.slice(1);
                    }
                }).join('');
            })

            return {
                ...toRefs(state),
                open,
                close,
                handleOption,
                submitForm,
                handleSizeChange,
                handleCurrentChange,
                multipleTable,
                handleInputChange,
                handlePreView
            }
        }
    }
</script>